<template>
  <uni-nav-bar :title="TeamInfo.KeyCustom.name" left-icon="left" @clickLeft="navBack" :fixed="true"
    statusBar></uni-nav-bar>
  <view class="package">{{TeamInfo.KeyCustom.name}}</view>
  <view class="package" v-for="item in accountList" :key='item.id'>
    <view class="space-between">
      <view>账号</view>
      <view>{{item.username}}</view>
    </view>
    <view class="space-between top">
      <view>昵称</view>
      <view>{{item.nickname}}</view>
    </view>
  </view>
  <view class="package column">
    <image :src="TeamInfo.KeyCustom.bind" mode=""></image>
  </view>
  <!-- <view class="add" style="margin-top:60px">添加手机端账户</view> -->
  <view class="add" @click="navTo('administrator/keyaccount/addAccount')">添加PC端账户</view>
  <view style="width:100%;height:1px"></view>
</template>

<script setup lang="ts">
  import { navBack, navTo } from '@/utils/navigator';
  import { ref } from 'vue';
  import { onShow } from '@dcloudio/uni-app';
  import { getAdminList } from '@/gql/administrator';
  import { showLoading } from '@/utils/prompt';
  import { toPublish } from '@mqtt';
  import { information } from '@/stores/administrator';
  const TeamInfo = information();
  const accountList = ref()
  onShow(() => {
    init()
  })
  function init() {
    showLoading()
    const payload = {
      query: getAdminList,
      variables: {
        customers_id: Number(TeamInfo.KeyCustom.id),
      },
    };
    toPublish(
      'ql/control/getAdminList',
      payload,
      (obj : any) => {
        const { getAdminList } = obj.data;
        accountList.value = getAdminList
      }
    );
  }
</script>

<style scoped lang="less">
  .add {
    width: 480rpx;
    height: 100rpx;
    background: linear-gradient(-10deg, #2C96F9, #1B91FF);
    border-radius: 5px;
    text-align: center;
    line-height: 100rpx;
    color: #fff;
    margin: 20rpx auto;
    font-size: 32rpx;
  }

  .top {
    margin-top: 10rpx;
  }

  .package {
    image {
      width: 470rpx;
      height: 428rpx;
      background: #FFFFFF;
      box-shadow: 0px 0px 16rpx 0px rgba(179, 179, 179, 0.44);
      border-radius: 5px;
    }
  }
</style>